<template>
  <div class="VehicleType">
    <!-- -->
    <div>
      <div class="top top1">
        <div class="top-text">
          <span class="top-text-name">大型车</span>
          <span class="top-text-num">12</span>
        </div>
      </div>
      <div class="top top2">
        <div class="top-text">
          <span class="top-text-name">危化品车</span>
          <span class="top-text-num ">12</span>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="top-text">
        <div  class="top-text-name all-text">全部车辆</div>
        <span class="top-text-num big-text">1332</span>
      </div>
    </div>
    <div>
      <div class="bom bom1">
        <div class="top-text">
          <span class="top-text-name">客车</span>
          <span class="top-text-num">12</span>
        </div>
      </div>
      <div class="bom bom2">
        <div class="top-text">
          <span class="top-text-name">小型车</span>
          <span class="top-text-num">12</span>
        </div>
      </div>
      <div class="bom bom3">
        <div class="top-text">
          <span class="top-text-name">新能源车</span>
          <span class="top-text-num">12</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ParkingLotIndex",

  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>
<style scoped lang="scss">
.VehicleType {
  position: relative;
  height: 100%;
  width: 100%;
  .top {
    background-image: url("@/assets/img/VehicleType/other.png");
    width: 100px;
    height: 100px;
    /* 使背景图片铺满整个元素 */
    background-size: cover;
    /* 固定高度 */
    background-size: cover;
    /* 其他可能的背景样式 */
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 不重复背景图片 */
    text-align: center;
    
  }
  .top-text {
    margin-top: -10px;
      .top-text-name {
      }
      .top-text-num {
        color: #05f5fe;
        font-size: 18px;
      }
      .big-text{
        font-size: 24px;
      }
      .all-text{
        margin-top: -26px;
        background: #164A8A;
        // background: linear-gradient(to right, #091E54 0%,#0D3269 30%, #13518A 50%, #0D3269 70%,#091E54 100%);
        background: linear-gradient(to right, rgba(124,178,255,0.00), #13518A 50%, rgba(124,178,255,0.00) 100%);
        border-top: 1px solid #1785D0; /* 上边框 */
        border-bottom: 1px solid #1785D0; /* 下边框 */
        border-image: linear-gradient(to right, rgba(0,0,0,.1) 0%, #1785D0 50%, rgba(0,0,0,.1) 100%) 1;
        height: 25px;
        line-height: 25px;
        text-align: center;
        white-space: nowrap;       /* 确保文本不会换行 */
        overflow: hidden;          /* 隐藏超出容器的部分 */
        text-overflow: ellipsis;   /* 显示省略号 */
      }
    }
  .center {
    background-image: url("@/assets/img/VehicleType/center.png");
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 不重复背景图片 */
    background-size: cover;
    width: 200px;
    height: 110px;
    text-align: center;
  }
  .bom {
    background-image: url("@/assets/img/VehicleType/other.png");
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 不重复背景图片 */
    background-size: cover;
    width: 100px;
    height: 100px;
    text-align: center;
  }
  .top1 {
    position: absolute;
    left: 60px;
    top: 20px;
  }
  .top2 {
    position: absolute;
    left: 380px;
    top: 20px;
  }
  .center {
    position: absolute;
    left: calc(50% - 100px);
    top: 90px;
  }
  .bom1 {
    position: absolute;
    left: 30px;
    top: 150px;
  }
  .bom2 {
    position: absolute;
    left: calc(50% - 55px);
    top: 220px;
  }
  .bom3 {
    position: absolute;
    left: 400px;
    top: 150px;
  }
}
</style>